 <template>
  <div class="account-change-detail box-shadow" v-if="!getIsPhone">
    <div id="wrap">
      <!-- 柱状图占位 -->
      <div class="diagram-wrapper">
        <div class="histogram1 histogram" ref="charts">
          <div class="chart-head">
            <span class="icon">
              <i class="iconfont iconshezhi_kuaijiemima"></i>
            </span>
            <span class="chart-name">收入</span>
            <span class="red">{{personalInfo.totalIncome}}</span>
          </div>
          <div class="charts">
            <chart-item 
              v-for="(item, index) in personalInfo.income" 
              :showDetail="incomeActiveIndex == index ? true : false"
              :key="item.id"
              :total="personalInfo.totalIncome"
              :subtotal="item.totalAmount"
              :name="item.name"
              @mouseenter.native="updateIncomeActiveIndex(index)"
            ></chart-item>
          </div>
        </div>
        <div class="histogram2 histogram">
          <div class="chart-head">
            <span class="icon">
              <i class="iconfont iconshezhi_kuaijiemima"></i>
            </span>
            <span class="chart-name">支出</span>
            <span class="red">{{personalInfo.totalOutput}}</span>
          </div>
          <div class="charts">
            <chart-item 
              v-for="(item, index) in personalInfo.output" 
              :showDetail="outputActiveIndex == index ? true : false"
              :key="item.id"
              :total="personalInfo.totalOutput"
              :subtotal="item.totalAmount"
              :name="item.name"
              :color="'green'"
              @mouseenter.native="updateOutputActiveIndex(index)"
            ></chart-item>
          </div>
        </div>
      </div>
      <ul>
        <li class="formHead">
          <span class="orderNumber title">单号</span>
          <span class="changeTime title">账变时间</span>
          <span class="changeType title">账变类型</span>
          <span class="changeMoney title">账变金额</span>
          <span class="changedMoney title">账变后金额</span>
          <span class="nowStatus title">当前状态</span>
          <span class="tip title">备注</span>
        </li>
        <li v-for="(item,index) in allData" :key="index">
          <span class="orderNumber">{{ item.id }}</span>
          <span class="changeTime">{{ item.time | formater }}</span>
          <span class="changeType">{{ item.type }}</span>
          <span class="changeMoney" :class="item.amount>=0?'red':'green'"><span :class="item.amount > 0 ?'red':'green'" v-if="item.amount>=0">+</span>{{ item.amount }}</span>
          <span class="changedMoney">{{ item.balance }}</span>
          <span class="nowStatus">{{ item.status }}</span>
          <span class="tip" v-if="item.note">{{ item.note }}</span>
        </li>
      </ul>
    </div>
  </div>
  <div class="account-change-detail" v-else>
    <div class="chart-wrapper box-shadow">
      <bc-chart :dataType="dataType" :personalInfo="personalInfo" @click="updateOptions"></bc-chart>
    </div>
    <div class="table box-shadow">
      <list-header 
        :dataList="currentButtonData"
        :selectedButton="selectedButton"
        @mouseenter="updateSelectedButton"
        :amount="totalAmount"
        :dataType="dataType"
        >
      </list-header>
      <div class="list">
        <list-item 
          v-for="item in currentData" 
          :key="item.id" 
          :item="item"
          :dataType="dataType"
          @mouseenter="checkDetail"
        ></list-item>
      </div>
    </div>
  </div>
</template>

<script>
import BcChart from '@/components/bc-chart/bc-chart'
import ChartSelector from '@/components/bc-chart/components/chart-selector'
import ChartItem from '@/components/bc-chart/components/chart-item'
import ListHeader from './list-header'
import ListItem from './list-item'
import { mapGetters } from 'vuex';
export default {
  components: {
    BcChart,
    ListHeader,
    ListItem,
    ChartSelector,
    ChartItem
  },
  props: {
    type: {
      type: String,
      default: 'all',
    },
    subType: {
      type: String,
      default: '全部种类'
    }
  },
  data() {
    return {
      dataType: '收入',
      // 当前展示的数据为全部
      selectedButton: '全部',
      // 充值
      personalInfo: {
        accountName: 'zhangsan',
        totalIncome: 46100,
        totalOutput: 60000,
        income: [
          {
            id: 1,
            name: '个人充值', 
            totalAmount: 10000, 
            detail: [
              {
                id: 'DDD1',
                time: new Date().getTime() - 10 * 3600 * 1000,
                type: '个人充值',
                amount: 500,
                balance: 100,
                status: '充值成功',
                note: '银行信息有误'
              },
              {
                id: 'DDD2',
                time: new Date().getTime() - 9 * 3600 * 1000,
                type: '个人充值',
                amount: 600,
                balance: 99,
                status: '充值成功'
              },
              {
                id: 'DDD3',
                time: new Date().getTime() - 8 * 3600 * 1000,
                type: '个人充值',
                amount: 700,
                balance: 98,
                status: '充值成功',
                note: '支付宝转帐'
              },
              {
                id: 'DDD4',
                time: new Date().getTime() - 7 * 3600 * 1000,
                type: '个人充值',
                amount: 800,
                balance: 97,
                status: '充值成功',
                note: '支付宝转帐'
              },
            ],
          },
          {
            id: 2,
            name: '购彩奖金',  
            totalAmount: 5000,
            detail: [
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩奖金',
                amount: 500,
                balance: 96,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 8.5 * 3600 * 1000,
                type: '购彩奖金',
                amount: 200,
                balance: 100,
                balance: 93,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 7.5 * 3600 * 1000,
                type: '购彩奖金',
                amount: 100,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 6.5 * 3600 * 1000,
                type: '购彩奖金',
                amount: 600,
                balance: 100,
                status: '购彩成功'
              },
            ],
          },
          {
            id: 3,
            name: '彩票返点',  
            totalAmount: 10000,
            detail: [
              {
                id: 'DDD9', 
                time: new Date().getTime() - 8.8 * 3600 * 1000,
                type: '彩票返点',
                amount: 500,
                balance: 100,
                status: '返点成功'
              },
              {
                id: 'DDD10', 
                time: new Date().getTime() - 7.6 * 3600 * 1000,
                type: '彩票返点',
                amount: 200,
                balance: 100,
                status: '返点成功'
              },
              {
                id: 'DDD11', 
                time: new Date().getTime() - 6.5 * 3600 * 1000,
                type: '彩票返点',
                amount: 100,
                balance: 100,
                status: '返点成功'
              },
              {
                id: 'DDD12', 
                time: new Date().getTime() - 4.5 * 3600 * 1000,
                type: '彩票返点',
                amount: 600,
                balance: 100,
                status: '返点成功'
              },
            ],
          },
          {
            id: 4,
            name: '斗牛奖金',  
            totalAmount: 0,
            detail:[],
          },
          {
            id: 5,
            name: '日工资', 
            totalAmount: 0, 
            detail:[],
          },
          {
            id: 6,
            name: '代理分红', 
            totalAmount: 0, 
            detail: [],
          },
          {
            id: 7,
            name: '系统充值', 
            totalAmount: 100, 
            detail: [],
          },
          {
            id: 8,
            name: '个人撤单', 
            totalAmount: 1000, 
            detail: [],
          },
          {
            id: 9,
            name: '资金转换', 
            totalAmount: 20000, 
            detail: [],
          },
        ],
        output: [
          {
            id: 1,
            name: '购彩', 
            totalAmount: 20000, 
            detail:[
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.8 * 3600 * 1000,
                type: '购彩',
                amount: -500,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩',
                amount: -600,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 9.2 * 3600 * 1000,
                type: '购彩',
                amount: -700,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 8.9 * 3600 * 1000,
                type: '购彩',
                amount: -800,
                balance: 100,
                status: '购彩成功'
              },
            ] 
          },
          {
            id: 2,
            name: 'AG亏损', 
            totalAmount: 10000, 
            detail:[
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.8 * 3600 * 1000,
                type: '购彩',
                amount: -500,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩',
                amount: -600,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 9.2 * 3600 * 1000,
                type: '购彩',
                amount: -700,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 8.9 * 3600 * 1000,
                type: '购彩',
                amount: -800,
                balance: 100,
                status: '购彩成功'
              },
            ] 
          },
          {
            id: 3,
            name: '提现扣款', 
            totalAmount: 20000, 
            detail:[
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.8 * 3600 * 1000,
                type: '购彩',
                amount: -500,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩',
                amount: -600,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 9.2 * 3600 * 1000,
                type: '购彩',
                amount: -700,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 8.9 * 3600 * 1000,
                type: '购彩',
                amount: -800,
                balance: 100,
                status: '购彩成功'
              },
            ] 
          },
          {
            id: 4,
            name: '购彩', 
            totalAmount: 20000, 
            detail:[
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.8 * 3600 * 1000,
                type: '购彩',
                amount: -500,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩',
                amount: -600,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 9.2 * 3600 * 1000,
                type: '购彩',
                amount: -700,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 8.9 * 3600 * 1000,
                type: '购彩',
                amount: -800,
                balance: 100,
                status: '购彩成功'
              },
            ] 
          },
          {
            id: 5,
            name: '购彩', 
            totalAmount: 20000, 
            detail:[
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.8 * 3600 * 1000,
                type: '购彩',
                amount: -500,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩',
                amount: -600,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 9.2 * 3600 * 1000,
                type: '购彩',
                amount: -700,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 8.9 * 3600 * 1000,
                type: '购彩',
                amount: -800,
                balance: 100,
                status: '购彩成功'
              },
            ] 
          },
          {
            id: 6,
            name: '系统扣款', 
            totalAmount: 20000, 
            detail:[
              {
                id: 'DDD5', 
                time: new Date().getTime() - 9.8 * 3600 * 1000,
                type: '购彩',
                amount: -500,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD6', 
                time: new Date().getTime() - 9.5 * 3600 * 1000,
                type: '购彩',
                amount: -600,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD7', 
                time: new Date().getTime() - 9.2 * 3600 * 1000,
                type: '购彩',
                amount: -700,
                balance: 100,
                status: '购彩成功'
              },
              {
                id: 'DDD8', 
                time: new Date().getTime() - 8.9 * 3600 * 1000,
                type: '购彩',
                amount: -800,
                balance: 100,
                status: '购彩成功'
              },
            ] 
          },
        ]
      },
      putMoney: [
        {
          id: 'DDD1',
          time: new Date().getTime() - 10 * 3600 * 1000,
          type: '个人充值',
          amount: 500,
          balance: 100,
          status: '充值成功',
          note: '银行信息有误'
        },
        {
          id: 'DDD2',
          time: new Date().getTime() - 9 * 3600 * 1000,
          type: '个人充值',
          amount: 600,
          balance: 99,
          status: '充值成功'
        },
        {
          id: 'DDD3',
          time: new Date().getTime() - 8 * 3600 * 1000,
          type: '个人充值',
          amount: 700,
          balance: 98,
          status: '充值成功',
          note: '支付宝转帐'
        },
        {
          id: 'DDD4',
          time: new Date().getTime() - 7 * 3600 * 1000,
          type: '个人充值',
          amount: 800,
          balance: 97,
          status: '充值成功',
          note: '支付宝转帐'
        },
      ],
      // 购彩奖金
      bonus: [
        {
          id: 'DDD5', 
          time: new Date().getTime() - 9.5 * 3600 * 1000,
          type: '购彩奖金',
          amount: 500,
          balance: 96,
          status: '购彩成功'
        },
        {
          id: 'DDD6', 
          time: new Date().getTime() - 8.5 * 3600 * 1000,
          type: '购彩奖金',
          amount: 200,
          balance: 100,
          balance: 93,
          status: '购彩成功'
        },
        {
          id: 'DDD7', 
          time: new Date().getTime() - 7.5 * 3600 * 1000,
          type: '购彩奖金',
          amount: 100,
          balance: 100,
          status: '购彩成功'
        },
        {
          id: 'DDD8', 
          time: new Date().getTime() - 6.5 * 3600 * 1000,
          type: '购彩奖金',
          amount: 600,
          balance: 100,
          status: '购彩成功'
        },
      ],
      // 彩票返点
      lotteryRefund: [
        {
          id: 'DDD9', 
          time: new Date().getTime() - 8.8 * 3600 * 1000,
          type: '彩票返点',
          amount: 500,
          balance: 100,
          status: '返点成功'
        },
        {
          id: 'DDD10', 
          time: new Date().getTime() - 7.6 * 3600 * 1000,
          type: '彩票返点',
          amount: 200,
          balance: 100,
          status: '返点成功'
        },
        {
          id: 'DDD11', 
          time: new Date().getTime() - 6.5 * 3600 * 1000,
          type: '彩票返点',
          amount: 100,
          balance: 100,
          status: '返点成功'
        },
        {
          id: 'DDD12', 
          time: new Date().getTime() - 4.5 * 3600 * 1000,
          type: '彩票返点',
          amount: 600,
          balance: 100,
          status: '返点成功'
        },
      ],
      // 提现
      withdraw: [
        {
          id: 'DDD1', 
          time: new Date().getTime() - 9.9 * 3600 * 1000,
          type: '提现',
          amount: -500,
          balance: 100,
          status: '提现成功'
        },
        {
          id: 'DDD2', 
          time: new Date().getTime() - 9.6 * 3600 * 1000,
          type: '提现',
          amount: -400,
          balance: 100,
          status: '提现失败'
        },
        {
          id: 'DDDD3', 
          time: new Date().getTime() - 9.3 * 3600 * 1000,
          type: '提现',
          amount: -300,
          balance: 100,
          status: '提现成功'
        },
        {
          id: 'DDD4', 
          time: new Date().getTime() - 9 * 3600 * 1000,
          type: '提现',
          amount: -200,
          balance: 100,
          status: '提现成功'
        },
      ],
      // 购彩
      buyLottery: [
        {
          id: 'DDD5', 
          time: new Date().getTime() - 9.8 * 3600 * 1000,
          type: '购彩',
          amount: -500,
          balance: 100,
          status: '购彩成功'
        },
        {
          id: 'DDD6', 
          time: new Date().getTime() - 9.5 * 3600 * 1000,
          type: '购彩',
          amount: -600,
          balance: 100,
          status: '购彩成功'
        },
        {
          id: 'DDD7', 
          time: new Date().getTime() - 9.2 * 3600 * 1000,
          type: '购彩',
          amount: -700,
          balance: 100,
          status: '购彩成功'
        },
        {
          id: 'DDD8', 
          time: new Date().getTime() - 8.9 * 3600 * 1000,
          type: '购彩',
          amount: -800,
          balance: 100,
          status: '购彩成功'
        },
      ],
      // 
      // 账变明细/收入种类
      dataListIncome: [
        {
          id: 1, 
          name: '全部'
        },
        {
          id: 2, 
          name: '个人充值'
        },
        {
          id: 3, 
          name: '购彩奖金'
        },
        {
          id: 4, 
          name: '彩票返点',

        },
        {
          id: 5, 
          name: '头牛奖金'
        },
        {
          id: 6, 
          name: '未中奖退本金'
        },
        {
          id: 7, 
          name: '代理分红'
        },
        {
          id: 8, 
          name: '日工资'
        },
        {
          id: 9, 
          name: '系统充值'
        },
        {
          id: 10, 
          name: '个人撤单'
        },
        {
          id: 11, 
          name: '系统撤单'
        },
        {
          id: 12, 
          name: 'AG奖金'
        },
        {
          id: 13, 
          name: '拒绝提款'
        },
        {
          id: 14, 
          name: '资金转换'
        },
      ],
      // 账变明细/支出种类
      dataListOutput: [
        {
          id: 1, 
          name: '全部'
        },
        {
          id: 2, 
          name: '提现'
        },
        {
          id: 3, 
          name: '购彩'
        },
        {
          id: 4, 
          name: '斗牛',

        },
        {
          id: 5, 
          name: '提现申请'
        },
        {
          id: 6, 
          name: '系统扣款'
        },
        {
          id: 7, 
          name: 'AG亏损'
        },
        {
          id: 8, 
          name: '资金转换'
        },
      ],
      // 图表收入，activeIndex，
      incomeActiveIndex: 0,
      // 图表支出 activeIndex
      outputActiveIndex: 0
    }
  },
  created() {
    console.log(this.type, this.subType)
  },
  methods: {
    updateSelectedButton(index) {
      this.selectedButton = this.dataType == '收入' ? 
        this.dataListIncome[index].name :
        this.dataListOutput[index].name
    },
    updateOptions(data) {
      this.dataType = data
      this.selectedButton = '全部'
    },
    checkDetail(id) {
      this.$router.push({path: '/account-update/me/detail/' + id})
    },
    updateIncomeActiveIndex(index) {
      this.incomeActiveIndex = index
    },
    updateOutputActiveIndex(index) {
      this.outputActiveIndex = index
    }
  },
  computed: {
    allData() {
      let data = this.dataType == '收入' ? 
        [...this.putMoney, ...this.bonus, ...this.lotteryRefund] :
        [...this.withdraw, ...this.buyLottery]
      let sorted = data.sort((a, b) => {
        return a.time - b.time 
      })
      return sorted
    },
    currentData() {
      let data = []
      if (this.dataType == '收入') {
        switch(this.selectedButton) {
          case '全部':
            data = this.allData
            break;
          case '个人充值':
            data = this.putMoney
            break;
          case '购彩奖金':
            data = this.bonus
            break;
          case '彩票返点':
            data = this.lotteryRefund
            break;
        }
      } else {
        switch(this.selectedButton) {
          case '全部':
            data = this.allData
            break;
          case '提现':
            data = this.withdraw
            break;
          case '购彩':
            data = this.buyLottery
            break;
        }
      }
      return data 
    },
    totalAmount() {
      let amount = 0
      this.currentData.forEach(item => {
        amount += item.amount
      })
      return amount
    },
    currentButtonData() {
      return this.dataType == '收入' ? this.dataListIncome : this.dataListOutput
    },
    total() {
    
    },
    ...mapGetters('lottery', ['getIsPhone'])
  }
}
</script>

<style lang="stylus" scoped>
  @import '~@/assets/styles/variables.styl'
  @media screen and (min-width 750px)
      #wrap
        width 1200px;
        // height 530px;
        background-color #faf8f8;
        .diagram-wrapper 
          width 100%
          display flex 
          padding 0 20px
          .histogram
            display inline-block;
            width 570px;
            height 214px;
            border 1px solid #dbd3d3;
            border-radius 5px;
            margin-top 18px;
            margin-bottom 20px;
            box-sizing border-box 
            padding 10px 20px
            .chart-head  
              .chart-name 
                margin 0 10px
            .charts 
              height 130px
              margin-top 40px
              display flex 
              justify-content space-between
              .chart-wrapper 
                position relative 
                height 100%
          .histogram1 
            .chart-head 
              .icon 
                .iconfont 
                  color $color-theme-red 
              .red 
                color $color-theme-red      
          .histogram2
            margin-left 18px;
            .chart-head 
              .icon 
                .iconfont 
                  color $color-primary-green
              .red 
                color $color-primary-green
        ul
          width 1200px;
          list-style none;
          li
            height 39px;
            line-height 39px;
            border-bottom 1px solid #dbd3d3;
            span 
              display inline-block;
              text-align left;
              color #584844;
              font-size 14px;
              .red
                  color red;
              .green
                  color green;
            .red
              color red;
            .green
                color green;
            .title 
              font-weight 700
            .orderNumber
                width 165px;
                margin-left 18px;
            .changeTime
                width 150px;
            .changeType
                width 165px;
            .changeMoney
                width 174px;
            .changedMoney
                width 184px;
            .nowStatus
                width 134px;
            .tip
                width 180px;
        .formHead
            background-color #e7e0dd;
            height 39px;
            line-height 39px;
            border-top 1px solid #dbd3d3;
  @media screen and (max-width 750px)
    .chart-wrapper 
      border-radius 3px 
      background $color-text-button
    .table 
      border-radius 3px 
      background $color-text-button
      margin-top 10px
</style>